<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
        <P>1.星星</P>
        <div class="xx">
            <a href="#"><img src="images/t1.png"></a>
            <a href="#"><img src="images/t1.png"></a>
            <a href="#"><img src="images/t1.png"></a>
            <a href="#"><img src="images/t1.png"></a>
            <a href="#"><img src="images/t1.png"></a>
        </div>
        <p>2.计算器</p>
        <div class="jsq">
        <input id="num1">
        <select id="flag">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input id="num2">
        <button id="btn1">=</button>
        <input id="num3">
        </div>
        <p>3.留言板</p>
        <div class="lyb">
            <div class="nc-box">
                <span>昵称：</span>
                <input type="text" id="nc">
            </div>
            <div class="pl-box">
                <textarea id="slk"></textarea>
            </div>
            <div class="nmfb-box">
                <div class="nm">
                    <input type="checkbox" id="nm">
                    <span>匿名</span>
                </div>
                <button id="fb">发表</button>
            </div>
            <div class="tlq-box">

            </div>
        </div>
        <p>4.轮播图1</p>
        <div class="lbt">
            <img src="images/cat1.jpg" id="TP1">
            <img src="images/cat2.jpg" id="TP2">
            <button id="change">下一张</button>
        </div>
    <script>
        var arr = []
        arr = $("img:lt(5)") 
        $(arr[0]).mouseenter(function(){
            $(arr[0]).attr({src:'images/t2.png'})
        });
        $(arr[0]).mouseout(function(){
            $(arr[0]).attr({src:'images/t1.png'})
        });
        $(arr[1]).mouseenter(function(){
            $(arr[0]).attr({src:'images/t2.png'})
            $(arr[1]).attr({src:'images/t2.png'})
        });
        $(arr[1]).mouseout(function(){
            $(arr[0]).attr({src:'images/t1.png'})
            $(arr[1]).attr({src:'images/t1.png'})
        });
        $(arr[2]).mouseenter(function(){
            $(arr[0]).attr({src:'images/t2.png'})
            $(arr[1]).attr({src:'images/t2.png'})
            $(arr[2]).attr({src:'images/t2.png'})
        });
        $(arr[2]).mouseout(function(){
            $(arr[0]).attr({src:'images/t1.png'})
            $(arr[1]).attr({src:'images/t1.png'})
            $(arr[2]).attr({src:'images/t1.png'})
        });
        $(arr[3]).mouseenter(function(){
            $(arr[0]).attr({src:'images/t2.png'})
            $(arr[1]).attr({src:'images/t2.png'})
            $(arr[2]).attr({src:'images/t2.png'})
            $(arr[3]).attr({src:'images/t2.png'})
        });
        $(arr[3]).mouseout(function(){
            $(arr[0]).attr({src:'images/t1.png'})
            $(arr[1]).attr({src:'images/t1.png'})
            $(arr[2]).attr({src:'images/t1.png'})
            $(arr[3]).attr({src:'images/t1.png'})
        });
        $(arr[4]).mouseenter(function(){
            $(arr[0]).attr({src:'images/t2.png'})
            $(arr[1]).attr({src:'images/t2.png'})
            $(arr[2]).attr({src:'images/t2.png'})
            $(arr[3]).attr({src:'images/t2.png'})
            $(arr[4]).attr({src:'images/t2.png'})
        });
        $(arr[4]).mouseout(function(){
            $(arr[0]).attr({src:'images/t1.png'})
            $(arr[1]).attr({src:'images/t1.png'})
            $(arr[2]).attr({src:'images/t1.png'})
            $(arr[3]).attr({src:'images/t1.png'})
            $(arr[4]).attr({src:'images/t1.png'})
        });
    </script>
    <script>
        $("#btn1").click(function(){
        var n1=parseInt($("#num1").val());
        var n2=parseInt($("#num2").val());
        var flag=$("#flag").val();
        if(flag=="+")
            {
            $("#num3").val(n1+n2);
            }
        else if(flag=="-")
            {
            $("#num3").val(n1-n2);
            }
        else if(flag=="*")
        {
            $("#num3").val(n1*n2);
        }
        else if(flag=="/")
        {
            $("#num3").val(n1/n2);
        }		
    })
    </script>
    <script>
        var $butfb = $('#fb')
        var $nc = $('#nc')
        var $slk = $('#slk')
        var $nm = $('#nm')
        $butfb.click(function(){
            if($nc.val() == '' || $slk.val() == ''){
                alert('昵称和文本不能为空')
            }else{
               var s = new Date()
               var h = s.getHours()
               var m = s.getMinutes()
               var mm = s.getSeconds()
               var ni = $nc.val()
               var nei = $slk.val()
               console.log($nm[0].checked)
               if($nm[0].checked==true){
                   ni = '***'
               }
               var $newdom =  $('<div class="ncsj-box"><p class="ncwb">' + ni + '</p><p class="sj">' + h +':' + m + ':' + mm + '</p></div><span>' + nei + '</span>')
               $('.tlq-box').append($newdom.clone()) 
            }
            
        })
        
    </script>
    <script>
        $change = $('#change')
        $TP1 = $('#TP1')
        $TP2 = $('#TP2')
        $change.click(function(){
            a
        })
    </script>
</body>
</html>